<!-- https://konvajs.org/docs/sandbox/Video_On_Canvas.html -->
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@8.2.1/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva GIF Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <div id="container"></div>
    <script>
      var width = window.innerWidth
      var height = window.innerHeight

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      })

      var layer = new Konva.Layer()
      stage.add(layer)
      // <video className="" playsInline="true" webkit-playsinline="true" x5-playsinline="true" tabIndex="2" mediatype="video"
      //        src="blob:http://localhost:63342/cb31ca70-9501-4a89-aa1e-887e11a8c148"></video>

      var video = document.createElement('video')
      video.webkitPlaysinline = 'true'
      video.x5playsinline = 'true'
      video.tabIndex = '2'
      video.mediatype = 'video'
      video.src = 'http://dslive.grtn.cn/stzh/sd/live.m3u8'
      // video.src =
      //   'https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm';
      var image = new Konva.Image({
        image: video,
        draggable: true,
        x: 50,
        y: 20,
      })
      layer.add(image)
      var text = new Konva.Text({
        text: 'Loading video...',
        width: stage.width(),
        height: stage.height(),
        align: 'center',
        verticalAlign: 'middle',
      })
      layer.add(text)

      var anim = new Konva.Animation(function () {
        // do nothing, animation just need to update the layer
      }, layer)

      // update Konva.Image size when meta is loaded
      video.addEventListener('loadedmetadata', function (e) {
        text.text('Press PLAY...')
        image.width(video.videoWidth)
        image.height(video.videoHeight)
      })

      document.getElementById('play').addEventListener('click', function () {
        text.destroy()
        video.play()
        anim.start()
        console.log('image', image.toJSON())
        console.log('image', layer.toJSON())
      })
      document.getElementById('pause').addEventListener('click', function () {
        video.pause()
        anim.stop()
      })
    </script>
  </body>
</html>
